﻿<%@ page language="java" pageEncoding="UTF-8"
	errorPage="/ui/defaultException.jsp"%>
<%@include file="/ui/tags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>编辑保存--行程--禅境旅行</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <%@include file="/ui/portal/commonjscss.jsp"%>
</head>
<body>
    <div class="page">
        <%@include file="/ui/portal/head.jsp"%>
        <div id="container" class="container margin10">
            <div class="trip-area-title">
                只要花费三分钟时间，就可以制作自己的个性化旅行计划</div>
            <div class="trip-area-step">
                <div class="trip-area-step-prev">
                    <a href="${cpath }/trip/sort"">上一步</a>
                </div>
                <div class="trip-area-step-detail">
                    <div class="trip-area-step-show step4">
                    </div>
                    <div class="trip-area-step-1 ">
                        1.选择目的地
                    </div>
                    <div class="trip-area-step-1">
                        2.选择地点
                    </div>
                    <div class="trip-area-step-1">
                        3.调整与排序
                    </div>
                    <div class="trip-area-step-1 current">
                        4.编辑保存
                    </div>
                </div>
                <div class="trip-area-step-next">
                    <a href="javascript:void(0)"  onclick="save()">保存</a>
                </div>
            </div>
            <div class=" clear1">
            </div>
            <div class="trip-step4-edit">
                <div class="trip-step4-edit-name">
                    <div class="trip-step4-edit-name-l">
                        行程名称:
                        <form id="trip-name-form" class="editform" action="${cpath }/trip/save" method="post">
                        <input type="text" name="tripName" class="trip-step4-edit-name-input" value="${trip.tripName }"/>
                    	</form>
                    </div>
                    <div class="trip-step4-edit-name-r">
                        <a href="#" style="display: none;">
                            <img src="${cpath }/resources/portal/img/trip/bedit.png" /></a>
                    </div>
                </div>
                <div class="trip-step4-edit-corp">
                    <div class="trip-step4-edit-name-l">
                        行程封面:
                        <input id="trip-img-name" type="text" class="trip-step4-edit-name-input" />
                    </div>
                    <div class="trip-step4-edit-name-r">
                        <a id="add_image" href="javascript:void(0)">
                            <img src="${cpath }/resources/portal/img/trip/badd.png" /></a>
                        <form id="trip-img-form" action="${cpath }/trip/save-image" method="post" enctype="multipart/form-data">
                        	
                    	</form>
                    </div>
                </div>
            </div>
            <div class=" trip-step4-info">
                <div class=" trip-step4-info-left">
                    <div class="trip-step4-info-left-top">
                        <div class="info-left-top-t">
                            <div class="info-left-top-t-name">${trip.tripName }</div>
                            <div class="info-left-top-t-o">
                                <div class="ol" style="display: none">
                                    212
                                </div>
                                <div class="om" style="display: none">
                                    145
                                </div>
                                <div class="or" style="display: none">
                                    333
                                </div>
                            </div>
                        </div>
                        <div class="info-left-top-re">
                            <div class="info-left-top-re-day">
                                ${trip.tripDays }天
                            </div>
                            <div class="info-left-top-re-view">
                            </div>
                        </div>
                        <div class="info-left-top-img" img-resize='true'>
                             <img src="${image_domain }${trip.tripOrigImg}" />
                        </div>
                        <div class="info-left-top-km">
                            <div class="kml">
                            </div>
                            <div class="kmm">
                            <fmt:formatNumber value="${trip.tripDistance}" pattern="#" type="number"/>KM
                            </div>
                            <div class="kmr">
                            </div>
                        </div>
                        <div class="info-left-top-exp">
                        	<c:forEach var="category" items="${categoryStatList }">
                            <div class="o-exp1">
                                <div class="exp1">
                                	<img src="${image_domain}${category.categoryImg}" alt="" />
                                </div>
                                <div class="exp1info">
                                   <span class="countinfo">${category.categoryCount }</span>
								   <span class="titleinfo">${category.categoryName }</span>
                                </div>
                            </div>
                            </c:forEach>
                        </div>
                        <div class="info-left-top-area2">
                            <div class="n">旅行地：</div>
                            <div class="n2">${dests }</div>
                        </div>
                        <div class="info-left-top-viewdetails">
                            <a href="javascript:void(0)">详细行程>></a>
                        </div>
                        <!-- 
                      <div class="info-left-top-line">
                            线路:上海-巴黎-巴黎-香港-上海
                        </div> 
                        <div class="info-left-top-country">
                            国家：${countrys }
                        </div>
                        <div class="info-left-top-area">
                            目的地：${dests }
                        </div>-->
                    </div>
                    <c:forEach var="tripDay" items="${tripDays }" varStatus="status">
                    <div class="trip-step4-info-days"
                    	trip-day-id="${tripDay.tripDay.tripDayId }" 
						trip-day="${tripDay.tripDay.tripDay }"
						trip-day-desc="${tripDay.tripDay.tripDayDesc }">
                        <div class="trip-step4-info-days-top">
                            <div class="daysl"> 第${status.count }天</div>
                            <div class="daysr">
                               <a class="viewdetails" href="javascript:void(0)" trip-day-id="${tripDay.tripDay.tripDayId}">
                                    <img src="${cpath }/resources/portal/img/trip/p.png" /></a>
                            </div>
                        </div>
                         <c:forEach var="item" items="${tripDay.tripItems }">
                        <div class="trip-step4-info-model"
                         		trip-day-id="${tripDay.tripDay.tripDayId }"
                        		trip-item-id="${item.tripItemId }"
								trip-img="${image_domain }${item.miniImg}"
								trip-summary="${item.summary }"
								trip-title="${item.titleZh }"
								trip-dest-id="${item.destId }"
								trip-dest="${item.destName }"
								trip-category-img="${image_domain }${item.categoryImg}"
								trip-category-id="${item.categoryId }"
								trip-stay-time="${item.pauseTime }"
								trip-lat="${item.lat }"
								trip-lng="${item.lng }">
                            <div class="step4-info-model-top">
                                <div class="step4-info-model-title">${item.titleZh }</div>
                                <div class="step4-info-model-view">
                                    <c:if test="${item.categoryId != 3 }">
                                    <a href="${cpath}/destination/${item.destId}/item/${item.relId}" target="_blank">查看详情>></a>
                                    </c:if>
                                    <c:if test="${item.categoryId == 3 }">
                                    <a href="${cpath}/hotel/${item.hotelId}" target="_blank">查看详情>></a>
                                    </c:if></div>
                            </div>
                            <div class="step4-info-model-img">
                                 <img class="lazy" 
                                 data-original="${image_domain }${item.origImg}"
                                 src="${cpath}/resources/portal/img/grey.gif" alt="${item.titleZh}"  />
                            </div>
                            <div class="step4-info-model-o" style="display: none">
                                <div class="or" style="display: none">
                                    333
                                </div>
                                <div class="om" style="display: none">
                                    145
                                </div>
                                <div class="ol" style="display: none">
                                    212
                                </div>
                            </div>
                            <div class="step4-info-model-note">${item.itemDesc }</div>
                            <div class="clear1"></div>
                        </div>
                        </c:forEach>
                        <div class="clear">
                        </div>
                    </div>
                    </c:forEach>
                    
                    <div class="clear1">
                    </div>
                </div>
                
                <div class=" trip-step4-info-right">
                    <div class="trip-step4-info-right-top-title">
                        <div class="til">
                        </div>
                        <div class="tim">每日行程</div>
                        <div class="tir">
                        </div>
                    </div>
                    <div class="trip-step4-info-right-days-info">
                        <div class="clear">
                        </div>
                        <div class="trip-step4-info-right-days-lines">
                        </div>
                        <div class="days-list">
                           <c:forEach var="tripDay" items="${tripDays }" varStatus="status">
                            	<div class="days-model">
									<div class="days-model-title"> 
										<img src="${cpath }/resources/portal/img/trip/p.png" />
										第${status.count }天
										</div>
									<c:forEach var="item" items="${tripDay.tripItems }" varStatus="daystatus">
										<div class="days-model-info">
											<span class="infocc">${daystatus.count}</span>
											<em title="${item.titleZh }">${item.titleZh }</em>
                                    		<span class="infodd"><img src="${image_domain }${item.categoryImg}" /></span>
										</div>
									</c:forEach>
								</div>
                            </c:forEach>
                            <div class="clear">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class=" clear1">
            </div>
        </div><!-- container end -->
        
          <!--每天行程的弹出页面 start-->
        <div class="trip-area-step3-info popdialog2" style="display: none;">
            <div class="trip-area-step3-info-title"><!-- 行程的第几天的标题 --></div>
            <div class="trip-area-step3-info-map"><!-- 地图区域 --></div>
            <div class="trip-area-step3-info-list">
                <div class="step3-info-lines">
                </div>
                <div class="step3-info-title">
                	<!--  目的地名称显示
                    <img src="img/trip/p.png" />&nbsp;圣魔历次 巴黎
                     -->
                </div>
                <div class="step3-info-title2">
                    <div class="infoa">
                        <!--  5 地点-->
                    </div>
                    <div class="infob">
                         <!-- 100 公里-->
                    </div>
                    <div class="infoc">
                        <!--8 小时-->
                    </div>
                </div>
                <div class="step3-info-l">
                	<!--  
                    <div class="step3-info-m">
                        <div class="step3-info-m-cl">
                            <img src="img/trip/1.png" />
                        </div>
                        <div class="step3-info-m-img">
                            <img src="assets/1000500.jpg" />
                        </div>
                        <div class="step3-info-m-title">
                            圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎
                            <img src="" />
                        </div>
                        <div class="step3-info-m-time">
                            60分钟
                        </div>
                        <div class="step3-info-m-note">
                            圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次
                            巴黎 圣魔历次 巴黎圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎 圣魔历次 巴黎
                        </div>
                    </div>
                    <div class="step3-info-m-other">
                        <span class="otherlength">距离：<img src="img/trip/walk.png" />
                            2km</span> <span class="othertime">
                                <img src="img/trip/time.png" />5分钟</span> <span class="otherline"></span>
                    </div>
                    <div class=" clear">
                    </div>-->
                </div>
            </div>
            <div class="step3-info-info">
            	<!-- 每天行程的描述 
                <img src="img/trip/e.png" />
                这里提供豪华租赁复古舞这里提供豪华租-->
            </div>
            <div class=" clear1">
            </div>
        </div> <!--每天行程的弹出页面 end-->
        
        <div class="trippopdetails" style="display: none;"><!-- 行程俯瞰列表  start-->
        </div><!-- 行程俯瞰列表  end-->
         <%@include file="/ui/portal/footer.jsp"%> 
         <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXF4z-R35SvrcxQNsQJUd6JIs4X1fAoZw&sensor=false"></script>
          <script src="${cpath}/resources/portal/js/distance.js" type="text/javascript"></script>
          <script src="${cpath}/resources/portal/js/jquery.form.js" type="text/javascript"></script>
          <script src="${cpath}/resources/portal/js/jquery.blockUI.js" type="text/javascript"></script>
           <script src="${cpath}/resources/portal/js/trip_sort.js" type="text/javascript"></script>
           <script src="${cpath}/resources/portal/js/layer-v1.7.0/layer/layer.min.js" type="text/javascript"></script>
           <script src="${cpath}/resources/mobile/js/lazyload/jquery.lazyload.js"></script>
		  <script type="text/javascript">
			var path = '${cpath}';
        	var map = new TMap({cpath:path});
	
        	function uploadImage(){
        		var exts = ["gif","jpg","png"];
				var $file = $(this);
				var fileName = $file.val();
				//计算出点的位置
				 var pos=fileName.lastIndexOf(".");
				 //截取点之后的字符串
				 var ext = fileName.substring(pos+1);
				 if ($.inArray(ext,exts) == -1){
					 alert("文件格式不对-"+ext);
					 return false;
				 }
				 //设置文件值
				 $("#trip-img-name").val(fileName);
				 
				 $("#trip-img-form").ajaxSubmit({
						dataType:"json",
						beforeSubmit:function(){
							$.blockUI({ message: "图片上传中。。。" });
						},
						success:function(data){
							//var dataObj = $.parseJSON(data);
							if(data.resultCode == '00000000'){
								$(".info-left-top-img img").attr("src",'${image_domain}'+data.resultMsg+"?r="+ new Date());
								$.unblockUI();
							}else if (data.resultCode == '10000000'){
								location.href = "${cpath}/admin";
								return;
							}
							else{
								$.unblockUI();
								alert(data.resultMsg);
							}
							
							//刷新原来的表单
							$file.remove();
							$("#trip-img-form").clearForm();
						}});
        	}
        	function addImage(){
        		var $file = $("<input>").attr("id","trip-img").attr("type","file")
        							.attr("name","tripImg")
        							.css("display","none")
        							.change(uploadImage);
        		$("#trip-img-form").append($file);  
        		$file.click();
        	}
			
        	function save(){
        		$("#trip-name-form").submit();
        	}
        	
			$(function() {
				$("img.lazy").lazyload();
				var linesheight = $(".days-list").height();
				$(".trip-step4-info-right-days-lines").height(linesheight);
					
				$("#add_image").click(addImage);
				
				//绑定每天行程地图事件
			    $(".viewdetails").click(function () {
			    	var tripDayId = $(this).attr("trip-day-id");
			    	Trip.layerTripDayOverlook(tripDayId, map);
	                //showMap(tripDayId);
	            });
				$(".info-left-top-viewdetails").click(function(){
					Trip.layerTripOverlook(path);
				});
			});
		</script>
    </div>
</body>
</html>
